<template>
  <div>
    监听按键
    <el-input v-model="ada" @keyup.enter.native="submit" />
    <div v-show="bool1">事件修饰符别名监听按键（回车）{{ ada }}</div>
    <el-input v-model="ad" />
    <div v-show="bool2">全局添加开启监听键盘按下事件（空格）{{ ad }}</div>
  </div>
</template>
<script>
export default {
  name: "fonts",
  data() {
    return {
      ad: "",
      ada: "",
      bool1: false,
      bool2: false
    };
  },
  methods: {
    submit(e) {
      console.log(this.ada);
      console.log(e.keyCode);
      this.bool1 = true;
    },
    submit2(e) {
      if (e.keyCode == 32) {
        console.log(this.ad);
        console.log(e.keyCode);
        this.bool2 = true;
      }
    }
  },
  created() {
    window.addEventListener("keydown", this.submit2, true); // 全局添加开启监听键盘按下事件
  },
  computed: {},
  destroyed() {
    window.removeEventListener("keydown", this.submit2, true); // 全局添加时，离开本页面时要取消监听
  }
};
</script>
<style lang="scss" scoped></style>
